body {
	&[data-theme='dark'] {
		.login-page {
			.login-page-bg {
				.mask {
					background-color: rgba(88, 88, 88, 0.5);
				}
			}
		}
	}
}

.login-page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	overflow: hidden;
	background-size: cover;
	position: relative;
	//padding-bottom: 100px;
	
	.ld2-avatar {
		 img {
			width: 104px;
			height: 104px;
		}
	}
	
	.verification-code {
		height: 40px;
	}
	
	.verification-code-input {
		width: 130px;
	}
	
	.zr-login-message {
		width: 273px;
		margin-bottom: 8px;
		background-color: #E91E63;
		border: 1px solid #E91E63;
		span{
			color: #ffffff;
		}
	}
	
	input {
		width: 210px;
		font-size: 14px;
	}
	
	& > h1 {
		font-size: 30px;
		margin-bottom: 20px;
		color: #003685;
	}
	
	.logo-image {
		height: 30px;
	}
	
	.ld2-avatar {
		border: 8px solid rgba(115, 115, 115, 0.29);
		border-radius: 50%;
		margin-bottom: 20px;
	}
	
	.login-page-bg {
		position: absolute;
		top: -8px;
		bottom: -8px;
		left: -8px;
		right: -8px;
		z-index: -1;
		//background-image: linear-gradient(to top, #001444 20%, #ffffff 80%);
		//background-color: #e6e6e6;
		background-image: url("../../images/login/bg04.jpg");
		//background-image: linear-gradient(to top, #007fff 20%, #001444 80%);
		background-size: cover;
		filter: blur(8px);
		
		&.bg01{
			background-image: url("../../images/login/bg01.jpg");
		}
		&.bg02{
			background-image: url("../../images/login/bg02.jpg");
		}
		&.bg03{
			background-image: url("../../images/login/bg03.jpg");
		}
		&.bg04{
			background-image: url("../../images/login/bg04.jpg");
		}
		&.bg05{
			background-image: url("../../images/login/bg05.jpg");
		}
		&.bg07{
			background-image: url("../../images/login/bg07.jpg");
		}
		
		.mask {
			position: absolute;
			top: 0px;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			filter: blur(2px);
			background-color: rgba(184, 184, 184, 0.5);
		}
	}
	
	.container {
		width: 420px;
		height: 600px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 10;
		box-shadow: 2px 2px 9px #0000003f;
		overflow: hidden;
		
		.header {
			height: 300px;
			width: 500px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			
			.header-content {
				position: absolute;
				top: 0px;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				padding-top: 20px;
			}
			
			.login-error-message{
				width: 100%;
				display: flex;
				justify-content: center;
				position: absolute;
				bottom: -20px;
			}
			
			& > img {
				height: 100%;
			}
		}
		
		.content {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			flex-grow: 1;
			padding-top: 30px;
			width: 100%;
			background-color: #002b4b;
			
			input{
				font-weight: bold;
			}
		}
	}
}